<template>
    <section class="todo">
        <div class="input">
            <input type="text"
                   placeholder="接下去要做什么？"
                   @keyup.enter="addTodo">
        </div>

        <div class="items">
            <Item v-for="todo in filterTodos"
                  :key="'todo' + todo.id"
                  :todo="todo"
                  @deleteTodo="deleteTodo"/>
        </div>

        <Tabs :todo="filterTodos"
              :stateFilter="stateFilter"
              @toggleFilter="toggleFilter"
              @clearAll="todos = todos.filter(item => !item.completed)"/>
    </section>
</template>

<script>
    import Item from './todo-content-item.vue'
    import Tabs from './todo-content-tabs.vue'

    let id = 0;
    export default {
        name: "todo-content",
        components: {
            Item,
            Tabs
        },
        data() {
            return {
                todos: [],
                stateFilter: 'all'
            }
        },
        methods: {
            toggleFilter(state) {
                this.stateFilter = state;
            },
            addTodo(e) {
                if (e.target.value.trim()) {
                    this.todos.unshift({
                        id: id++,
                        text: e.target.value.trim(),
                        completed: false
                    });
                    e.target.value = '';
                }
            },
            deleteTodo(id) {
                this.todos.splice(this.todos.findIndex(item => item.id === id), 1);
            }
        },
        computed: {
            filterTodos() {
                if ('all' === this.stateFilter) {
                    return this.todos;
                }
                let completed = this.stateFilter === 'completed';
                return this.todos.filter(item => completed === item.completed);
            }
        }
    }
</script>

<style scoped>
    .todo {
        width: 600px;
        margin: 0 auto 20px;
        -moz-box-shadow: 2px 2px 5px #333333;
        -webkit-box-shadow: 2px 2px 5px #333333;
        box-shadow: 2px 2px 5px #333333;
    }

    .todo .input input {
        width: 540px;
        border: none;
        height: 50px;
        font-size: 28px;
        padding: 5px 10px 5px 50px;
    }

    .items{
        max-height: 407px;
        overflow-y: auto;
        overflow-x: hidden;
    }
</style>
